/*
 * @Author: qgn
 * @Date: 2021-06-08 23:49:46
 * @LastEditTime: 2021-07-29 00:05:18
 * @LastEditors: qgn
 * @Description: vue.config.js配置文件
 * @FilePath: /admin-template-study/vue.config.js
 */

//开启严格模式，严格模式写在引入文件的上面
"use strict";

//引入路径文件
const path = require("path");
const defaultSettings = require("./src/settings");

/**
 * 公共方法
 * 设置当前相对路径
 */
function resolve(dir) {
  return path.join(__dirname, dir);
}

//取出settings文件中名子进行使用，用作项目名
const name = defaultSettings.title;

/**
 * if your port is set to 80
 * use administrator privileges to execute the command line
 * for example , mac: sudo npm run
 * you can change the port by the following method:
 * port = 9527 npm run dev OR npm run dev --port = 9527
 */
const port = process.env.port || process.env.npm_config_port || 9527;

// All configuration item explanations can be find in vue官网
module.exports = {
  /**
   * you will need set publicPath if you plan to deploy your sit under a sub path
   * for example GitHub Page If you plan to deploy site to https:://foo.github.io/bar/,
   * the publicPath should be set to "/bar/"
   * In most cases please use '/'
   */

  publicPath: "/",
  outputDir: "dist",
  assetsDir: "static",
  indexPath: "index.html",
  filenameHashing: true,
  lintOnSave: process.env.NODE_ENV === "development",
  productionSourceMap: false,
  devServer: {
    port, //定义的端口
    open: true, //编译完成是否打开浏览器
    overlay: {
      //配置文件报错配置
      warnings: false, //不进行告警
      errors: true, //进行报错
    },
    // before: require('./mock/mock-server.js') //请求数据再进行学习
  },
  configureWebpack: {
    //此处也是对webpack打包时的一些配置信息
    name, //webpack编译打包时会将此处名字设置为程序的名字，并且可以在index.html获取到
    resolve: {
      alias: {
        "@": resolve("src"), //当前文件地址的别名
      },
    },
  },
  chainWebpack(config) {
    //该配置能加速首屏加载的速度
    config.plugin("preload").tap(() => [
      {
        rel: "preload",
        //to ignore runtime.js
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: "initial",
      },
    ]);

    // 当页面太多时去掉一些无意义的请求
    config.plugins.delete("prefetch");

    //set svg-sprite-loader
    //打包时处理svg文件，将其打包到src目录下的icons目录下
    //include是包含，exclude是去除
    config.module
      .rule("svg")
      .exclude.add(resolve("src/icons"))
      .end();
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        SymbolId: "icon-[name]",
      })
      .end();

    config.when(process.env.NODE_ENV !== "development", (config) => {
      config
        .plugin("ScriptExtHtmlWebpackPlugin") //作用将打包生成的js 文件直接导入到index.html文件中
        .after("html")
        .use("script-ext-html-webpack-plugin", [
          {
            //runtime必须与runtimeChunk同名，默认就是同名的
            inline: /runtime\..*\.js$/,
          },
        ])
        .end();
      config;
      // 优化分割打包文件
      optimization.splitChunks({
        chunks: "all", // 默认打包所有文件
        cacheGroups: {
          // 打包分包
          libs: {
            name: "chunk-libs", // 分包名 chunk-libs
            test: /[\\/]node_modules[\\/]/, // 据说\\ 也有匹配所有路径的意思，待验证,打包所有node_modules下的第三方文件
            priority: 10, // 缓存优先级，一个分包中可能有很多个module具体缓存哪个就按照priority的权重去区分
            chunks: "initial", // 仅仅打包最初始的第三方文件
          },
          elementUI: {
            name: "chunk-elementUI", // 分包elementUI
            priority: 20, // 缓存打包优先级
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // 只打包node_modules下的elemeny-ui下的文件
          },
          commons: {
            test: resolve(src / commons),
            minChunks: 3, // commons中的文件至少被三个文件引用才会被打包出去，否则不会被打包出去
            priority: 5,
            reuseExistingChunk: true, // 允许复用已打包的文件
          },
        },
      });
      config.optimization.runtimeChunk("single"); // 从打包的app.js中将chunk抽取出来，防止每次app.打包影响之前打包的文件
    });
  },
};
